<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>Vue中的数据代理</title>
	<script type="text/javascript" src="./../vue.js/vue.js"></script>
</head>

<body>
	<div id="root">
		<h2>学校名称:{{_data.name}}</h2>
		<h2>学校地址:{{address}}</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false;

	let data = {
		name: '尚硅谷',
		address: '宏福科技园'
	}

	const vm = new Vue({
		el: '#root',
		data
	})
</script>

</html>

<!-- 
	1. vue 中的数据代理:
		通过 vm 对象来代理 data对象 中属性的操作(读/写)
	2. vue 中数据代理的好处
		更加方便的操作 data 中的数据
	3. 基本原理
		通过 Object.defineProperty() 把 data对象中所有属性添加到 vm 上.
		为每一个添加到 vm 上的属性, 都指定一个 getter/setter
		在 getter/setter 内部去操作 (读/写)data 中对应的属性.
-->